<template>
  <div id="targetManage">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-document-checked" @click="clickAdd">增加</el-button>
        <el-button size="small" @click="getList(basicData)">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" />
        <el-table-column align="center" prop="code" label="指标编码" />
        <el-table-column align="center" prop="name" label="指标名称" />
        <el-table-column align="center" prop="indicatorMethod.data" label="所属方法" />
        <el-table-column align="center" prop="indicatorProperty.data" label="所属类型" />
        <el-table-column align="center" prop="sortValue" label="排序号" />
        <el-table-column align="center" prop="memo" label="指标备注" />
        <el-table-column align="center" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="slot, total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增 -->
    <el-dialog :visible.sync="addShow" width="40%" title="新增">
      <el-form
        ref="projectManageForm"
        :model="basicData.model"
        :rules="basicDataRules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="指标编码：" prop="code">
              <el-input size="mini" v-model="basicData.model.code" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标名称：" prop="name">
              <el-input size="mini" v-model="basicData.model.name" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属方法：" prop="indicatorMethod.key" style="display:flex">
              <el-radio-group
                v-model="basicData.model.indicatorMethod.key"
                border="true"
                size="small"
              >
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_METHOD"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属类型：" prop="indicatorProperty.key" style="display:flex">
              <el-radio-group
                v-model="basicData.model.indicatorProperty.key"
                border="true"
                size="small"
              >
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_PROPERTY"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="实验项目:"
              prop="projectIdList"
              class="projectIdList"
              style="display:flex"
            >
              <el-radio-group
                v-model="basicData.model.experimentCode.key"
                border="true"
                size="small"
              >
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序号：" prop="sortValue">
              <el-input size="mini" v-model="basicData.model.sortValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="memo">
              <el-input size="mini" v-model="basicData.model.memo" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="40%" title="修改">
      <el-form
        ref="projectManageForm"
        :model="editData"
        :rules="basicDataRules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="指标编码：" prop="code">
              <el-input size="mini" v-model="editData.code" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标名称：" prop="name">
              <el-input size="mini" v-model="editData.name" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属方法：" prop="indicatorMethod.key" style="display:flex">
              <el-radio-group v-model="editData.indicatorMethod.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_METHOD"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属类型：" prop="indicatorProperty.key" style="display:flex">
              <el-radio-group v-model="editData.indicatorProperty.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_PROPERTY"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="实验项目:"
              prop="projectIdList"
              class="projectIdList"
              style="display:flex"
            >
              <el-radio-group v-model="editData.experimentCode.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序号：" prop="sortValue">
              <el-input size="mini" v-model="editData.sortValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="memo">
              <el-input size="mini" v-model="editData.memo" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickEditSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import QualityManageApi from "@/api/QualityManage.js";
import { initDicts } from "@/utils/commons";
export default {
  data() {
    return {
      // 转菊花
      loading: false,
      // 增加弹窗
      addShow: false,
      // 修改弹窗
      editShow: false,
      // 总数
      total: 0,
      // 表格数据
      tableData: [],
      // 弹窗form表单数据
      basicData: {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentCode: {
            data: "",
            key: ""
          },
          indicatorMethod: {
            data: "",
            key: ""
          },
          indicatorProperty: {
            data: "",
            key: ""
          },
          name: ""
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 修改数据
      editData: {
        code: "",
        experimentCode: {
          data: "",
          key: ""
        },
        id: 0,
        indicatorMethod: {
          data: "",
          key: ""
        },
        indicatorProperty: {
          data: "",
          key: ""
        },
        isDel: 0,
        memo: "",
        name: "",
        schemeId: 0,
        sortValue: 0
      },
      basicDataRules: {
        code: [{ required: true, message: "   ", trigger: "change" }],
        name: [{ required: true, message: "   ", trigger: "change" }],
        "indicatorMethod.key": [
          { required: true, message: "   ", trigger: "change" }
        ],
        "indicatorProperty.key": [
          { required: true, message: "   ", trigger: "change" }
        ]
      },
      // 字典
      dicts: {
        INDICATOR_METHOD: {}, //质控方法
        EXPERIMENT_CODE: {}, //项目
        INDICATOR_PROPERTY: {} //类型
      }
    };
  },
  mounted() {
    initDicts(
      ["INDICATOR_METHOD", "INDICATOR_PROPERTY", "EXPERIMENT_CODE"],
      this.dicts
    );
    this.getList(this.basicData);
  },
  methods: {
    // 获取数据
    getList(data) {
      this.loading = true;
      QualityManageApi.targetManage.page(data).then(res => {
        if (res.status == "200") {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 点击增加
    clickAdd() {
      this.addShow = true;
    },
    // 点击修改
    clickEdit(v) {
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
    },
    // 点击删除
    clickDelete(v) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        QualityManageApi.targetManage.delete({ "ids[]": v.id }).then(res => {
          if (res.status == "200") {
            this.getList(this.basicData);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message.error(res.statusText);
          }
        });
      });
    },
    // 新增保存
    clickSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.targetManage.add(this.basicData.model).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: "新增成功!"
              });
              this.basicData = {
                current: 1,
                map: {},
                model: {
                  code: "",
                  experimentCode: {
                    data: "",
                    key: ""
                  },
                  indicatorMethod: {
                    data: "",
                    key: ""
                  },
                  indicatorProperty: {
                    data: "",
                    key: ""
                  },
                  name: ""
                },
                order: "descending",
                size: 10,
                sort: "id"
              };
              this.getList(this.basicData);
              this.addShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 修改保存
    clickEditSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.targetManage.edit(this.editData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: "修改成功!"
              });
              this.getList(this.basicData);
              this.editShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#targetManage {
  .el-form-item__content {
    margin-left: 0 !important;
  }
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
